﻿<header id="header" class="clearfix @(IsHome?"home-header":"")">
    <Row Style="flex-flow: nowrap; height: 64px;" OnBreakpoint="OnBreakpoint">
        <GridCol Xs="24" Sm="24" Md="6" Lg="6" Xl="5" Xxl="4">
            <h1>
                <a id="logo" href="/">
                    <img alt="logo" src="/docs/assets/logo.svg">Ant Design Blazor
                </a>
            </h1>
        </GridCol>
        @if (_isMobile)
        {
            <Dropdown Placement="PlacementType.BottomRight" Trigger="new[] { TriggerType.Click }">
                <Overlay>
                    <HeaderMenu IsMobile />
                </Overlay>
                <ChildContent>
                    <Icon Type="unordered-list" Class="nav-phone-icon" />
                </ChildContent>
            </Dropdown>
        }
        @if (!_isMobile)
        {
            <GridCol Class="menu-row" Xs="0" Sm="0" Md="18" Lg="18" Xl="19" Xxl="20">
                <HeaderMenu IsMobile="false" />
            </GridCol>
        }
    </Row>
</header>

@code {
    public bool _isMobile;

    [Parameter] public bool IsHome { get; set; }

    [Parameter] public EventCallback<bool> OnMobileModeChanged { get; set; }

    private void OnBreakpoint(BreakpointType breakpoint)
    {
        _isMobile = breakpoint.IsIn(BreakpointType.Sm, BreakpointType.Xs, BreakpointType.Md);
        if (OnMobileModeChanged.HasDelegate)
        {
            OnMobileModeChanged.InvokeAsync(_isMobile);
        }
    }
}
